<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<script src="js/smart.js"></script>
	<style type="text/css">
		.floor{
			width:1000px;
			margin: 0 auto;
		}
		.tab-title span{
			padding: 10px 20px;
			margin: 5px 5px 5px 0;
			background: #ccc;
			float:left;
			color:#fff;
		}

		.tab-title .active{
			
			background: #cc0000;
			
		}
		.list-box{
			height:500px;
			position: relative;
		}
		.list-ul{
			width:1000px;
			height:499px;
			border-left: 1px solid #ccc;
			border-top: 1px solid #ccc;
			position: absolute;
			left: 0;
			top:0;
		}
		.list-ul li{
			float:left;
			width:179px;
			border-right: 1px solid #ccc;
			height:228px;
			border-bottom: 1px solid #ccc;
			padding:10px;
		}

		.list-ul li img{
			width: 179px;
			height:190px;
			display:block;
			/*margin:0 auto;*/
		}

		.addCar{
			display:block;
			margin-top: 8px;
			line-height: 30px;
			text-align:center;
			font-size: 20px;
			background: #cc0000;
			border-radius:5px;
		}
		.msgBox {
			width: 200px;
			height: 100px;
			background: red;
			position: absolute;
			right: 0;
			bottom: 0;
			display: none;
		}
	</style>
</head>
<body>
	<div class="floor">
		<p class="tab-title clearfix">
			<!-- <span>小米商城</span>
			<span>小米商城</span> -->
		</p>
		<div class="list-box">
			<!-- <ul class="list-ul">
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
				<li>
					<a href="#"><img src=""></a>
					<span class="addCar">立即加入购物车</span>
				</li>
			</ul>
			<ul class="list-ul">
				<li><a href="#"><img src=""></a><span class="addCar">立即加入购物车</span> </li>
			</ul> -->

		</div>
	</div>
	<div class="msgBox">
		已加入购物车<span id="msg">0</span>件商品
	</div>
</body>
	<script type="text/javascript">
		$(function(){
			$.get("product.json",function(d){
				// d =JSON.parse(d)
				console.log(d) //一个对象四个属性 代表四个选项
				for(var attr in d){
					$(".tab-title").append('<span>'+d[attr].title+'</span>')
					//创建四个ul
					var oUl = $("<ul class='list-ul'></ul>");
					
					//通过数据往ul里 创建 li 
					var list = d[attr].list;
					for (var i = 0; i < list.length; i++) {
						oUl.append(`<li>
						<a href="#"><img src=${list[i].img}></a>
						<span class="addCar">立即加入购物车</span>
						</li>`)
					}

					$(".list-box").append(oUl)

				}

				//选项卡
				var index = 0;
				$(".tab-title span").eq(index).addClass("active").siblings().removeClass("active");
				$(".list-ul").eq(index).show().siblings().hide();
				$(".tab-title span").click(function(){
					index = $(this).index();
					$(".tab-title span").eq(index).addClass("active").siblings().removeClass("active");
					$(".list-ul").eq(index).show().siblings().hide();
				})

				//点击加入购物车
				$(".addCar").on({
					"click":function(){
						$(".msgBox").show().delay(1000).hide()
					},
					mouseover:function(){
						$(this).css({background: "#ff9900",color:"#fff"})
					},
					mouseout:function(){
						$(this).css({background: "#cc0000",color:"#000"})
					}
				})

				// //选项卡功能
				// var aSpa = $(".tab-title span")
				// var aUl = $(".list-ul");
				// var index =0;
				// tab();
				// function tab(){
				// 	for (var i = 0; i < aSpa.length; i++) {
				// 		aSpa[i].className = ""
				// 		aUl[i].style.display = "none"
				// 	}
				// 	aSpa[index].className = "active"
				// 	aUl[index].style.display = "block"
				// }


				// for (var i = 0; i < aSpa.length; i++) {
				// 	(function(i){
				// 		aSpa[i].onclick = function(){
				// 			index =i;
				// 			tab()
				// 		}
				// 	})(i)
				// }

			},"json")

			// function $(c){
			// 	return document.querySelectorAll(c)
			// }
		})
				
	

	</script>
</html>